<div class="sm:rounded-md sm:overflow-hidden shadow">
  <div class="bg-white dark:bg-gray-800 py-6 px-4 space-y-6 sm:p-6">
    <div>
      <h2 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Danger zone</h2>
      <p class="mt-1 text-sm leading-5 text-gray-500 dark:text-gray-200">Destructive actions below can result in irrecoverable data loss. Be careful.</p>
    </div>
    <%= if @conn.assigns[:current_user_role] == :owner do %>
      <li class="py-4 flex items-center justify-between space-x-4">
        <div class="flex flex-col">
          <p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">
          Transfer Site Ownership
          </p>
          <p class="text-sm leading-5 text-gray-500 dark:text-gray-200">
          Transfer ownership of the site to a different account
          </p>
        </div>
        <%= link("Transfer #{@site.domain} ownership", to: Routes.membership_path(@conn, :transfer_ownership_form, @site.domain), class: "inline-block mt-4 px-4 py-2 border border-gray-300 dark:border-gray-500 text-sm leading-5 font-medium rounded-md text-red-700 bg-white dark:bg-gray-800 hover:text-red-500 dark:hover:text-red-400 focus:outline-none focus:border-blue-300 focus:ring active:text-red-800 active:bg-gray-50 transition ease-in-out duration-150") %>
      </li>
      <div class="border-b border-gray-200 dark:border-gray-500"></div>
    <% end %>

    <li class="py-4 flex items-center justify-between space-x-4">
      <div class="flex flex-col">
        <p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">
        Reset Stats
        </p>
        <p class="text-sm leading-5 text-gray-500 dark:text-gray-200">
        Reset all stats but keep the site configuration intact
        </p>
      </div>
      <%= link("Reset #{@site.domain} stats", to: "/#{URI.encode_www_form(@site.domain)}/stats", method: :delete, class: "inline-block mt-4 px-4 py-2 border border-gray-300 dark:border-gray-500 text-sm leading-5 font-medium rounded-md text-red-700 bg-white dark:bg-gray-800 hover:text-red-500 dark:hover:text-red-400 focus:outline-none focus:border-blue-300 focus:ring active:text-red-800 active:bg-gray-50 transition ease-in-out duration-150", data: [confirm: "Resetting the stats cannot be reversed. Are you sure?"]) %>
    </li>
    <div class="border-b border-gray-200 dark:border-gray-500"></div>

    <li class="py-4 flex items-center justify-between space-x-4">
      <div class="flex max-w-md flex-col">
        <p class="text-sm leading-5 font-medium text-gray-900 dark:text-gray-100">
        Delete Site
        </p>
        <p class="text-sm leading-5 text-gray-500 dark:text-gray-200">
        Permanently remove all stats and the site configuration too
        </p>
      </div>
      <%= link "Delete #{@site.domain}", to: "/#{URI.encode_www_form(@site.domain)}", method: :delete, class: "inline-block px-4 py-2 border border-transparent font-medium rounded-md text-red-700 dark:text-red-800 bg-red-100 dark:bg-red-200 hover:bg-red-50 dark:hover:bg-red-300 focus:outline-none focus:border-red-300 focus:ring active:bg-red-200 transition ease-in-out duration-150 sm:text-sm sm:leading-5", data: [confirm: "Deleting the site data cannot be reversed. Are you sure?"] %>
    </li>
  </div>
</div>
